<template>
    <div class="page">
        <!-- 头像、个人设置 -->
        <div class="header">
            <!-- 头像 -->
            <div class="avatar" @click="handleAvatarClick"><img :src="avatar"></div>
            <!-- 设置 -->
            <div class="setting" @click="handleSettingClick"><img src="@/assets/images/home/setting.png"></div>
            <!-- 下拉设置菜单 -->
            <div v-if="showSettings" class="overlay" @click="closeOverlay">
                <div class="dropdown" @click.stop>
                    <ul>
                        <li @click="goToChangeAvatar">
                            <img src="@/assets/images/home/ChangeAt.png" class="inline-icon" alt="修改头像" />
                            <span>修改头像</span>
                        </li>
                        <li @click="goToEditInfo">
                            <img src="@/assets/images/home/CgInfo.png" class="inline-icon" alt="修改信息" />
                            <span>修改信息</span>
                        </li>
                        <li @click="goToChangePassword">
                            <img src="@/assets/images/home/CgPwd.png" class="inline-icon" alt="修改密码" />
                            <span>修改密码</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 登录确认弹窗 -->
            <div v-if="showLoginConfirm" class="login-confirm-overlay" @click="closeLoginConfirm">
                <div class="login-confirm-dialog" @click.stop>
                    <div class="login-confirm-content">
                        <div class="login-confirm-title">您当前未登录</div>
                        <div class="login-confirm-text">登录后才能使用该功能</div>
                        <div class="login-confirm-buttons">
                            <button class="login-btn" @click="goToLogin">去登录</button>
                            <button class="cancel-btn" @click="closeLoginConfirm">再看看</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="slider">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :width="375" :height="200">
                <van-swipe-item v-for="item in posterList" :key="item.id">
                    <img :src="item.src" class="Posters" @click="goToProductDetail(item.id)" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 金刚区 -->
        <div class="diamond-area">
            <div v-for="(item, index) in diamondItems" :key="index"
                :class="['diamond-card', index === 0 ? 'card-left' : 'card-right']" @click="goToDiamondPage(item.path)">
                <div class="diamond-img">
                    <img :src="item.icon" alt="图标" />
                </div>
                <div class="diamond-desc">{{ item.name }}</div>
            </div>
        </div>
        <!-- 瀑布流 -->
        <div class="content">
            <Waterfull />
        </div>
        <!-- 底部导航 -->
        <TabNav />

    </div>
</template>

<script setup>
defineOptions({
    name: 'HomePage'
})

import Waterfull from './components/Waterfull.vue'
import TabNav from '@/components/TabNav/TabNav.vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const showSettings = ref(false);
const router = useRouter();
const showLoginConfirm = ref(false);

const posterList = ref([

    { id: 4, src: 'https://felixai.oss-cn-chengdu.aliyuncs.com/0e450a74-a4a1-4a58-a896-a38c6da9e4c5.png'  },
    { id: 2, src: 'https://felixai.oss-cn-chengdu.aliyuncs.com/2001.png' },
    { id: 5, src: 'https://felixai.oss-cn-chengdu.aliyuncs.com/0bb10126-2860-4b86-8a76-a8865dba7fde.png' },
    { id: 1, src: 'https://felixai.oss-cn-chengdu.aliyuncs.com/2000.png' }
]);

const goToProductDetail = (productId) => {

    router.push({ path: `/petStore/product${productId}` });
};
//头像
const handleAvatarClick = () => {
    if (userStore.userInfo && userStore.userInfo.id) {
        router.push({ path: '/MyInfo' });
    } else {
        showLoginConfirm.value = true;
    }
};

const avatar = ref(userStore.userInfo.userPic ? userStore.userInfo.userPic : 'src/assets/images/home/catAvatar.png')


//个人设置
// 切换遮罩和下拉菜单的显示状态  
const handleSettingClick = () => {
    if (userStore.userInfo && userStore.userInfo.id) {
        showSettings.value = !showSettings.value;
    } else {
        showLoginConfirm.value = true;
    }
};
// 关闭遮罩层  
const closeOverlay = () => {
    showSettings.value = false;
};
//跳转到修改头像页面
const goToChangeAvatar = () => {
    router.push({ path: 'ChangeAvatar' });
};
// 跳转到修改信息页面  
const goToEditInfo = () => {
    router.push({ path: 'EditInfo' });
};

// 跳转到修改密码页面  
const goToChangePassword = () => {
    router.push({ path: 'modifyPassword' });
};

// 关闭登录确认弹窗
const closeLoginConfirm = () => {
    showLoginConfirm.value = false;
};

// 去登录
const goToLogin = () => {
    router.push({ path: "/login" });
    closeLoginConfirm();
};

// 原有的头像点击方法改名
const goToUserPage = () => {
    if (userStore.userInfo.id) {
        router.push({ path: '/MyInfo' });
    }
    else {
        router.push({ path: "/login" });
    }
};

// 金刚区功能列表
const diamondItems = ref([
    {
        name: '宠物医生',
        path: '/doctorInformation',
        icon: 'src/assets/images/home/doctor.png'
    },
    {
        name: '宠物医院',
        path: '/petHospitalMap',
        icon: 'src/assets/images/home/hospital.png'
    },
]);


const goToDiamondPage = (path) => {
    router.push({ path });
};
</script>

<style lang="scss" scoped>
.page {
    width: 100%;
    position: relative;
    padding-top: 50px;
    /* 添加与header高度相同的上边距，避免内容被遮挡 */
    background-color: #fff;
    /* 整体背景色改为浅灰色，更柔和 */

    //顶部区域
    .header {
        width: 100%;
        height: 50px;
        background: linear-gradient(135deg, #dbd2f1, #d6d7ee);
        /* 顶部背景色改为白色 */
        position: fixed;
        /* 改为固定定位 */
        top: 0;
        /* 固定在顶部 */
        left: 0;
        /* 确保水平位置 */
        z-index: 100;
        /* 增加z-index确保在其他元素上方 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        /* 添加阴影效果，增加立体感 */

        //头像
        .avatar {
            position: absolute;
            top: 10px;
            left: 10px;
            border-radius: 50%;
            display: inline-block;

            img {
                height: 30px;
                width: 30px;
                border-radius: 50%;
            }

        }

        //设置
        .setting {
            position: absolute;
            top: 10px;
            right: 10px;

            display: inline-block;

        }

        .overlay {
            position: fixed;
            /* 遮罩层定位 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(56, 55, 55, 0.5);
            /* 半透明黑色背景 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 垂直和水平居中 */
            z-index: 1000;
            /* 确保在最上层 */
        }

        .dropdown {
            position: absolute;

            top: 40px;
            right: 0;
            background: white; // 下拉菜单背景色  
            border: 1px solid #ccc; // 下拉菜单边框  
            border-radius: 5px; // 圆角  
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            z-index: 10;

            ul {
                list-style: none;
                padding: 10px 0;
                margin: 0;

                li {
                    padding: 10px 20px;
                    cursor: pointer;
                    display: flex;
                    /* 使用flexbox实现图标和文本布局 */

                    .inline-icon {
                        width: 20px;
                        /* 调整图标宽度 */
                        height: 20px;
                        /* 调整图标高度 */
                        margin-right: 8px;
                        /* 图标和文本之间的间距 */
                        align-self: center;
                        /* 图标和文本垂直居中对齐 */
                    }

                    &:hover {
                        background-color: #f5f5f5; // 悬停效果  
                    }
                }
            }
        }
    }

    //轮播图
    .slider {
        width: 355px;
        height: 200px;
        margin: auto;
        margin-top: 10px;
        /* 增加轮播图上边距，使其与顶部区域有间隔 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        /* 添加阴影效果，增加立体感 */
        border-radius: 10px;
        /* 增加圆角，使外观更柔和 */

    }

    .my-swipe .van-swipe-item {
        
        background-color: #fff;

        .Posters {
            object-fit: cover;
            width: 355px;
            height: 200px;
            border-radius: 5px;
        }
    }

    //金刚区
    .diamond-area {
        width: 100%;
        padding: 10px 15px 5px;
        /* 增加金刚区上下内边距，使内容更宽松 */
        margin: 3px 0 3px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        z-index: 2;
        gap: 10px; // 两个卡片之间的间距
    }

    .diamond-card {
        width: 48%;
        height: 80px;
        /* 增加卡片高度，使内容更突出 */
        border-radius: 16px;
        /* 增加圆角半径，使外观更圆润 */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        /* 增加阴影强度，使卡片更立体 */
        padding: 1px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;

        &.card-left {
            background: #e7f4ff;
        }

        &.card-right {
            background: #e7ffd3;
        }

        &:active {
            transform: scale(0.98);
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        }

        .diamond-img {
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
            /* 增加图标与文字之间的间距 */
            background-color: #fff;
            /* 图标背景色改为白色，突出图标 */
            border-radius: 50%;
            /* 图标背景设为圆形 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            /* 图标添加阴影效果 */

            img {
                width: 60%;
                height: 60%;
                object-fit: contain;
            }
        }

        .diamond-desc {
            font-size: 16px;
            /* 增大文字字号 */
            font-weight: bold;
            color: #333;
            text-align: center;
        }
    }

    //瀑布区
    .content {
        position: relative;
        /* 改为相对定位，避免绝对定位带来的布局问题 */
        top: 0;
        width: 100%;
        height: auto;
        /* 高度设为自动，适应内容 */
        z-index: 1;
        margin-top: 2px;
        /* 增加瀑布流上边距，使其与金刚区有间隔 */
    }

    .login-confirm-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2000;
    }

    .login-confirm-dialog {
        width: 80%;
        max-width: 300px;
        background-color: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .login-confirm-content {
        padding: 20px;
    }

    .login-confirm-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        text-align: center;
        color: #333;
    }

    .login-confirm-text {
        font-size: 14px;
        margin-bottom: 20px;
        text-align: center;
        color: #666;
    }

    .login-confirm-buttons {
        display: flex;
        justify-content: space-between;
    }

    .login-btn {
        flex: 1;
        margin-right: 10px;
        padding: 10px 0;
        background-color: #dbd2f1;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
    }

    .cancel-btn {
        flex: 1;
        padding: 10px 0;
        background-color: #f5f5f5;
        color: #666;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
    }
}
</style>